package com.example.newproject_overseas.Screen


import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Button
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavHostController
import androidx.navigation.compose.rememberNavController
import com.example.newproject_overseas.components.TopApp
import com.example.newproject_overseas.R

@OptIn(ExperimentalMaterial3Api::class, ExperimentalMaterialApi::class)
@Composable
fun GoldMoney(navController: NavHostController) {
    Column(modifier = Modifier
        .fillMaxSize()
        .background(color = Color(0XFFEFF0F3))) {
        //导航1
        TopApp(title = "Gold Money", navController = navController)
        //告示
        Box(modifier = Modifier
            .fillMaxWidth()
            .padding(bottom = 13.dp)
            .background(Color(0xFFFFF6D4))) {
            Text(text = "Your next loan will be approved faster.", color = Color(0xFF5F5F5F), fontSize = 12.5.sp, modifier = Modifier.padding(top = 11.dp, bottom = 11.dp, start = 13.5.dp))
        }
        //卡片
        Box(modifier = Modifier
            .fillMaxWidth(1f)
            .padding(start = 8.dp, end = 8.dp)){
            Surface(shape = RoundedCornerShape(5.dp)){
                Column(modifier = Modifier
                    .background(Color.White)
                    .fillMaxWidth(1f)
                ) {
                    Surface(shape = RoundedCornerShape(5.dp)){
                        Row(modifier = Modifier
                            .padding(top = 4.5.dp, bottom = 22.dp),
                            verticalAlignment = Alignment.CenterVertically
                        ) {
                            Row(modifier = Modifier.padding(start = 10.dp),
                                verticalAlignment = Alignment.CenterVertically) {
                                VerticalLines()
                                Text(text = "Already repaid", modifier = Modifier, fontSize = 15.sp)
                            }

                            Spacer(modifier = Modifier.weight(1f))
                            Text(text = "₹", modifier = Modifier, color = Color(0xFFFFCC00), fontSize = 30.sp, fontWeight = FontWeight.Bold)
                            Text(text = "0", modifier = Modifier, color = Color(0xFFFFCC00), fontSize = 30.sp, fontWeight = FontWeight.Bold)
                            Spacer(modifier = Modifier.weight(1f))
                            Row(modifier = Modifier.padding(end = 10.dp)) {
                                Surface(shape = RoundedCornerShape(5.dp)) {
                                    Box(modifier = Modifier.background(Color(0xFFFFCC00))){
                                        Image(painter = painterResource(id = R.drawable.kf), contentDescription = "客服",
                                            modifier = Modifier
                                                .padding(5.dp)
                                                .width(17.dp)
                                                .height(17.dp))
                                    }
                                }

                            }
                        }
                }
                    //正文
                    Surface(shape = RoundedCornerShape(5.dp)){
                        Column(modifier = Modifier
                            .fillMaxWidth(1f)
                            .padding(bottom = 13.dp, start = 8.dp, end = 8.dp)
                            .background(Color(0xFFF1F1F1))) {
                            //第一行
                            Row(modifier = Modifier
                                .padding(start = 10.dp, end = 10.dp, bottom = 30.dp)
                                .background(Color(0xFFF1F1F1))
                                ) {
                                Column(modifier = Modifier
                                    .padding(
                                        start = 10.dp, end = 10.dp, top = 12.5.dp
                                    )
                                    .weight(1f)) {
                                    Text(text = "Loan note number:", fontSize = 15.sp, color = Color(0xFF999999), modifier = Modifier.padding(bottom = 15.dp))
                                    Text(text = "L20230115203625684")
                                }
                                Column(modifier = Modifier
                                    .padding(
                                        start = 10.dp, end = 10.dp, top = 12.5.dp
                                    )
                                    .weight(1f)) {
                                    Text(text = "Phone number:",fontSize = 15.sp, color = Color(0xFF999999), modifier = Modifier.padding(bottom = 15.dp))
                                    Text(text = "")
                                }
                            }
                            //第二行
                            Row(modifier = Modifier
                                .padding(start = 10.dp, end = 10.dp, bottom = 30.dp)
                                .background(Color(0xFFF1F1F1))) {
                                Column(modifier = Modifier
                                    .padding(
                                        start = 10.dp, end = 10.dp, top = 12.5.dp
                                    )
                                    .weight(1f)) {
                                    Text(text = "Bank cardnumber:", fontSize = 15.sp, color = Color(0xFF999999), modifier = Modifier.padding(bottom = 15.dp))
                                    Text(text = "4447777198")
                                }
                                Column(modifier = Modifier
                                    .padding(
                                        start = 10.dp, end = 10.dp, top = 12.5.dp
                                    )
                                    .weight(1f)) {
                                    Text(text = "Loan Period(Days):",fontSize = 15.sp, color = Color(0xFF999999), modifier = Modifier.padding(bottom = 15.dp))
                                    Text(text = "7 DAY")
                                }
                            }
                            //第三行
                            Row(modifier = Modifier
                                .padding(start = 10.dp, end = 10.dp, bottom = 30.dp)
                                .background(Color(0xFFF1F1F1))) {
                                Column(modifier = Modifier
                                    .padding(
                                        start = 10.dp, end = 10.dp, top = 12.5.dp
                                    )
                                    .weight(1f)) {
                                    Text(text = "End date:", fontSize = 15.sp, color = Color(0xFF999999), modifier = Modifier.padding(bottom = 15.dp))
                                    Text(text = "2023-01-2202:30:00")
                                }
                                Column(modifier = Modifier
                                    .padding(
                                        start = 10.dp, end = 10.dp, top = 12.5.dp
                                    )
                                    .weight(1f)) {
                                    Text(text = "Interest:",fontSize = 15.sp, color = Color(0xFF999999), modifier = Modifier.padding(bottom = 15.dp))
                                    Text(text = "₹ 0")
                                }
                            }

                            //第四行
                            Row(modifier = Modifier
                                .padding(start = 10.dp, end = 10.dp, bottom = 30.dp)
                                .background(Color(0xFFF1F1F1))) {
                                Column(modifier = Modifier.padding(start = 10.dp
                                    , end = 10.dp, top = 12.5.dp)) {
                                    Text(text = "Total service charge:", fontSize = 15.sp, color = Color(0xFF999999), modifier = Modifier.padding(bottom = 15.dp))
                                    Text(text = "₹ 5,250")
                                }
                                Spacer(modifier = Modifier.weight(1f))

                            }

                        }
                    }
                }
            }
        }
        //底部文字
        Box(
            modifier = Modifier
                .fillMaxSize() // 占用全部可用空间
        ) {
            Text(
                text = "This loan is provided by a third-party company Loan House",
                fontSize = 10.sp,
                textAlign = TextAlign.Center,
                color = Color(0xFFA1A1A1),
                modifier = Modifier
                    .align(Alignment.BottomCenter) // 底部剧中对齐文本
                    .padding(bottom = 64.dp)
            )
            //底部按钮
            Button(onClick = { /*TODO*/ }, modifier = Modifier
                .fillMaxWidth(1f)
                .height(44.dp)
                .align(Alignment.BottomCenter),
                colors = ButtonDefaults.buttonColors(Color(0xFFFFCC00)),
                shape = RoundedCornerShape(4.5.dp)) {
                Text(
                    modifier = Modifier,
                    text = "Borrow more money instantly",
                    color = Color(0xFFFFFFFF),
                    fontSize = 20.sp
                )
            }
        }



    }
}

@Preview
@Composable
fun GoldMoneyPreview() {
    val navController = rememberNavController()
    GoldMoney(navController)
}

